<template>
  <div class="app-container">
    <el-card class="box-card" header="企业信息">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="companyName">
              <el-input v-model="form.companyName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二级域名" prop="domain">
              <el-input
                v-model="form.domain"
                placeholder="请输入二级域名"
                disabled
              >
                <template slot="append">.shujuwuliankeji.com</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="平台名称" prop="platformName">
              <el-input
                v-model="form.platformName"
                placeholder="请输入自定义平台名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业地址">
              <el-input v-model="form.address" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="linkMain">
              <el-input
                v-model="form.linkMain"
                placeholder="请输入联系人"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="linkTel">
              <el-input v-model="form.linkTel" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业logo" prop="logo">
              <el-upload
                ref="upload"
                :limit="1"
                accept=".jpg, .png"
                :action="upload.url"
                :headers="upload.headers"
                :file-list="upload.fileList"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :on-remove="handlerFileRemove"
                :auto-upload="true"
                list-type="picture"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取图片</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录背景" prop="loginBgimg">
              <el-upload
                ref="bgImgUpload"
                :limit="1"
                accept=".jpg, .png"
                :action="upload.url"
                :headers="upload.headers"
                :file-list="upload.bgImgFileList"
                :on-progress="handleBgImgFileUploadProgress"
                :on-success="handleBgImgFileSuccess"
                :on-remove="handlerBgImgFileRemove"
                :auto-upload="true"
                list-type="picture"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取图片</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row justify="center" type="flex">
        <el-button type="primary" @click="submitForm">保存企业信息</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  getCompanyInfo,
  updateCompanyInfo,
} from "@/api/bussiness/company/companyInfo";
import { getToken } from "@/utils/auth";
export default {
  name: "CompanyInfo",
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 上传参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传的文件列表
        fileList: [],
        bgImgFileList: [],
      },
    };
  },
  created() {
    this.getCompanyInfo();
  },
  methods: {
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.form.logo = response.data.url;
      this.$modal.msgSuccess("上传成功");
    },
    //文件移除
    handlerFileRemove() {
      this.form.logo = "";
    },
    // 文件上传中处理
    handleBgImgFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleBgImgFileSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.form.loginBgImg = response.data.url;
      this.$modal.msgSuccess("上传成功");
    },
    //文件移除
    handlerBgImgFileRemove() {
      this.form.loginBgImg = "";
    },
    /** 查询企业信息列表 */
    getCompanyInfo() {
      getCompanyInfo().then((response) => {
        this.form = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateCompanyInfo(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
  },
};
</script>
